<template>
  <el-row class="login-page">
    <el-col :span="24" class="form-container">
      <el-form
        ref="registerForm"
        size="large"
        autocomplete="off"
        v-if="isRegister"
      >
        <el-form-item>
          <el-radio-group v-model="registerType">
            <el-radio-button label="employ">我是求职者</el-radio-button>
            <el-radio-button label="boss">我是招聘方</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input :prefix-icon="User" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            :prefix-icon="Lock"
            type="password"
            placeholder="请设置密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="verification-code-group">
            <el-input :prefix-icon="Lock" placeholder="请输入验证码"></el-input>
            <el-button
              type="primary"
              class="verification-code-btn"
              @click="sendVerificationCode"
            >
              获取验证码
            </el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            class="button"
            type="primary"
            auto-insert-space
            @click="register"
          >
            注册
          </el-button>
        </el-form-item>
        <el-form-item class="flex">
          <el-link type="info" :underline="false" @click="isRegister = false">
            ← 返回登录
          </el-link>
        </el-form-item>
      </el-form>
      <el-form ref="loginForm" size="large" autocomplete="off" v-else>
        <el-form-item>
          <el-radio-group v-model="loginType" class="radio-group">
            <el-radio-button label="employ">我是求职者</el-radio-button>
            <el-radio-button label="boss">我是招聘方</el-radio-button>
          </el-radio-group>
          <el-tooltip
            class="qr-code-tooltip"
            effect="dark"
            content="扫码登录"
            placement="top"
          >
            <img
              src="@/assets/default.png"
              class="qr-code"
              @click="showQrCodeModal = true"
            />
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="loginMethod" class="login-method-group">
            <el-radio :value="1">密码登录</el-radio>
            <el-radio :value="2">验证码登录</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input :prefix-icon="User" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item v-if="loginMethod === 1">
          <el-input
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item v-else class="verification-code-group">
          <el-input :prefix-icon="Lock" placeholder="请输入验证码"></el-input>
          <el-button
            type="primary"
            class="verification-code-btn"
            @click="sendVerificationCode"
          >
            获取验证码
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            class="button"
            type="primary"
            auto-insert-space
            @click="login"
          >
            登录
          </el-button>
        </el-form-item>
        <el-form-item class="flex">
          <el-link type="info" :underline="false" @click="isRegister = true">
            注册 →
          </el-link>
        </el-form-item>
      </el-form>
      <!-- 二维码模态框 -->
      <el-dialog
        title="微信扫码登录"
        v-model:visible="showQrCodeModal"
        width="30%"
        center
      >
        <div class="qr-code-modal">
          <img src="@/assets/avatar.jpg" />
          <p>请使用微信扫描二维码登录</p>
        </div>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'

const isRegister = ref(false)
const loginType = ref('employ') // 默认为求职者
const loginMethod = ref(1) // 默认为密码登录
const showQrCodeModal = ref(false) // 默认不显示二维码模态框

const sendVerificationCode = () => {
  // 发送验证码的逻辑
  console.log('发送验证码')
}

const login = () => {
  // 登录的逻辑
  console.log('执行登录操作')
}

const register = () => {
  // 注册的逻辑
  console.log('执行注册操作')
}
</script>

<style lang="scss" scoped>
.login-page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .form-container {
    width: 100%;
    max-width: 400px; /* 限制最大宽度 */
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    .button {
      width: 100%;
    }
    .flex {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    .radio-group {
      width: 100%;
    }
    .login-method-group {
      margin-bottom: 15px; /* 增加间隔 */
      width: 100%;
    }
    .verification-code-group {
      display: flex;
      align-items: center;
      gap: 10px; /* 增加间隔 */
      width: 100%;
      .verification-code-btn {
        height: 40px; /* 调整按钮高度 */
      }
    }
    .qr-code-tooltip {
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
    }
    .qr-code {
      width: 40px;
      height: 40px;
    }
    .qr-code-modal {
      text-align: center;
      img {
        width: 80%;
        margin-top: 20px;
      }
    }
  }
}
</style>
